<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Admonition :: Antora Docs</title>
    <meta name="generator" content="Antora 3.2.0-alpha.8">
    <link rel="stylesheet" href="../../_/css/site.css">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="../..">Antora Docs</a>
      <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Products</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Product A</a>
            <a class="navbar-item" href="#">Product B</a>
            <a class="navbar-item" href="#">Product C</a>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Services</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Service A</a>
            <a class="navbar-item" href="#">Service B</a>
            <a class="navbar-item" href="#">Service C</a>
          </div>
        </div>
        <div class="navbar-item">
          <span class="control">
            <a class="button is-primary" href="#">Download</a>
          </span>
        </div>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="component-a" data-version="1.6.0">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
    <h3 class="title"><a href="source-code.html">Component A</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="inline-text-formatting.html">Inline Text Formatting 行内文本格式</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="special-characters.html">特殊字符和符号 Special Characters and Symbols</a>
  </li>
  <li class="nav-item is-current-page" data-depth="1">
    <a class="nav-link" href="admonition.html">Admonition</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="sidebar.html">Sidebar</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="ui-macros.html">User Interface Macros</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Lists</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="lists/ordered-list.html">Ordered Lists</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="lists/unordered-list.html">Unordered Lists</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="source-code.html">“收集”源代码</a>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Component A</span>
    <span class="version">1.6.0</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <div class="title"><a href="source-code.html">Component A</a></div>
      <ul class="versions">
        <li class="version is-current is-latest">
          <a href="source-code.html">1.6.0</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <div class="title"><a href="../../component-b/3.1/index.html">Component B</a></div>
      <ul class="versions">
        <li class="version is-latest">
          <a href="../../component-b/3.1/index.html">3.1</a>
        </li>
        <li class="version">
          <a href="../../component-b/2.5/index.html">2.5-beta.1</a>
        </li>
        <li class="version">
          <a href="../../component-b/2.0/index.html">2.0</a>
        </li>
        <li class="version">
          <a href="../../component-b/1.0/index.html">1.0</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
  <a href="../../component-b/3.1/index.html" class="home-link"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="source-code.html">Component A</a></li>
    <li><a href="admonition.html">Admonition</a></li>
  </ul>
</nav>
</div>
  <div class="content">
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
<article class="doc">
<h1 class="page">Admonition</h1>
<div class="sect1">
<h2 id="_admonition_styles"><a class="anchor" href="#_admonition_styles"></a>Admonition styles</h2>
<div class="sectionbody">
<div class="paragraph">
<p>An admonition, also known as a notice, helps draw attention to a line or block of text with a special label or icon.</p>
</div>
<div class="paragraph">
<p>Asciidoctor comes with five built-in styles.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>NOTE</p>
</li>
<li>
<p>TIP</p>
</li>
<li>
<p>IMPORTANT</p>
</li>
<li>
<p>CAUTION</p>
</li>
<li>
<p>WARNING</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_basic_admonition"><a class="anchor" href="#_basic_admonition"></a>Basic admonition</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="title">Basic admonitions</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">CAUTION: Don't stick forks in electric sockets.

TIP: After someone sticks a fork in a socket, you'll need to reset the circuit in the breaker box in the dark and scary basement.

WARNING: Never go into the basement.

IMPORTANT: A monster lives in the basement.

NOTE: If you go into the basement, see if you can find Kenny's orange parka.</code></pre>
</div>
</div>
<div class="admonitionblock caution">
<table>
<tr>
<td class="icon">
<i class="fa icon-caution" title="Caution"></i>
</td>
<td class="content">
Don&#8217;t stick forks in electric sockets.
</td>
</tr>
</table>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
After someone sticks a fork in a socket, you&#8217;ll need to reset the circuit in the breaker box in the dark and scary basement.
</td>
</tr>
</table>
</div>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
Never go into the basement.
</td>
</tr>
</table>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
A monster lives in the basement.
</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
If you go into the basement, see if you can find Kenny&#8217;s orange parka.
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_complex_admonition"><a class="anchor" href="#_complex_admonition"></a>Complex admonition</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="title">Example block masquerading as an admonition</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">[IMPORTANT]
.Optional title
====
Use an example block to create an admonition that contains complex content, such as (but not limited to):

* Lists
* Multiple paragraphs
* Source code
* Images
====</code></pre>
</div>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="title">Optional title</div>
<div class="paragraph">
<p>Use an example block to create an admonition that contains complex content, such as (but not limited to):</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Lists</p>
</li>
<li>
<p>Multiple paragraphs</p>
</li>
<li>
<p>Source code</p>
</li>
<li>
<p>Images</p>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</article>
  </div>
</main>
</div>
<footer class="footer">
  <p>This page was built using the Antora default UI.</p>
  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
</footer>
<script id="site-script" src="../../_/js/site.js" data-ui-root-path="../../_"></script>
<script async src="../../_/js/vendor/highlight.js"></script>
  </body>
</html>
